<template>
  <b-container v-scroll="onWindowScroll" fluid :class="containerClass">
    <b-row align-h="center">
      <b-col lg="11">
        <b-navbar
          :variant="navbarVariant"
          :type="navbarVariant"
          class="d-flex justify-content-between"
          toggleable="md"
          style="height: 70px;"
        >
          <b-navbar-brand>
            <img
              class="d-inline-block"
              src="/images/logo.png"
              alt="Logo"
              width="140"
              height="47"
            />
          </b-navbar-brand>

          <b-navbar-toggle target="nav-collapse-main"></b-navbar-toggle>
          <b-collapse id="nav-collapse-main" class="align-self-stretch" is-nav>
            <b-navbar-nav align="center">
              <b-nav-item to="/">首页</b-nav-item>
              <b-nav-item to="/product">我们的产品</b-nav-item>
              <b-nav-item to="/aboutUs">关于我们</b-nav-item>
              <b-nav-item to="/appDownload">APP下载</b-nav-item>
              <b-nav-item to="/investmentCooperation">招商合作</b-nav-item>
              <b-nav-item to="/news">新闻动态</b-nav-item>
            </b-navbar-nav>
          </b-collapse>

          <div class="d-none d-lg-block">
            <p class="phone-info phone-info-title">
              服务热线（仅收市话费）
            </p>
            <p class="phone-info phone-info-number">
              400-0000-000
            </p>
          </div>
        </b-navbar>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import siteConfig from '@/assets/config/site';

export default {
  props: {
    static: {
      type: Boolean,
      default: false,
    },
    initVariant: {
      type: String,
      default: 'dark',
    },
  },
  data() {
    return {
      brandName: siteConfig.brandName,
      navbarVariant: 'dark',
    };
  },
  computed: {
    containerClass() {
      const clazz = {
        'fixed-top': true,
        'main-navbar': true,
      };
      if (this.navbarVariant === 'dark') {
        clazz['bg-dark-navbar-container'] = true;
      } else {
        clazz['bg-light-navbar-container'] = true;
      }
      return clazz;
    },
  },
  mounted() {
    this.navbarVariant = this.initVariant;
  },
  methods: {
    onWindowScroll(eventArgs, domEle) {
      if (window.scrollY > 600) {
        this.navbarVariant = 'light';
        domEle.classList.add('bg-light-navbar-container');
        domEle.classList.remove('bg-dark-navbar-container');
      }
      if (window.scrollY <= 600) {
        this.navbarVariant = 'dark';
        domEle.classList.remove('bg-light-navbar-container');
        domEle.classList.add('bg-dark-navbar-container');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$bannerHeight: 70px;

.container-fluid {
  transition: all 1s;
}
.navbar {
  transition: all 1s;
}
.main-navbar {
  height: $main-nav-bar-height;
}
// .navbar-collapse.collapse {
//   flex-grow: 0;
// }
.bg-dark {
  background-color: transparent !important;
}
.bg-light {
  background-color: transparent !important;
}
.bg-dark-navbar-container {
  background-color: rgba(102, 102, 102, 0.498039215686275) !important;
}
.bg-light-navbar-container {
  background-color: #f8f9fa !important;
}
#nav-collapse-main {
  // width: 100vw;
  margin: 0px -31px 0px;
  padding-left: 31px;
  padding-right: 31px;
  .navbar-nav {
    align-items: flex-end;
  }
  .nav-item {
    width: 101px;
    height: $bannerHeight;
    // margin-top: -0.5rem;
    // margin-bottom: -0.5rem;
    @include media-breakpoint-down(lg) {
      width: 95px;
    }
    @include media-breakpoint-down(md) {
      width: 90px;
    }
  }
  &.show {
    .nav-item {
      height: $bannerHeight * 0.8;
      .bg-dark-navbar-container & {
        background-color: rgba(102, 102, 102, 0.498039215686275);
      }
      .bg-light-navbar-container & {
        background-color: #f8f9fa;
      }
    }
  }
  .nav-link {
    font-size: 14px;
    /* color: #fff !important; */
    font-weight: 400;
    line-height: 22px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    font-style: normal;
    color: #333;
    line-height: 22px;
    .bg-dark-navbar-container & {
      color: #fff;
    }
  }
  .nuxt-link-exact-active {
    // background-color: rgba(52, 201, 251, 1);
    // color: #fff;
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 4px solid rgba(253, 190, 34, 1);
  }
}
.phone-info {
  color: #fff;
  text-align: left;
  line-height: 20px;
  margin: 0px;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  .bg-light-navbar-container & {
    color: #666;
  }
}
.phone-info-title {
  font-size: 12px;
  @include media-breakpoint-down(lg) {
    font-size: 10px;
  }
}
.phone-info-number {
  font-size: 14px;
  @include media-breakpoint-down(lg) {
    font-size: 12px;
  }
}
</style>
